<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>代码雨</title>
	<style>
        * {
            margin: 0;
            padding: 0;
        }

        body, html {
            height: 100vh;
            width: 100vw;
            background-color: #000;
            overflow: hidden;
            user-select: none;
        }

        .deep {
            width: 10px;
            word-wrap: break-word;
            font: 20px/24px 'Sans-serif';
            position: absolute;
            top: 100px;
            left: 2%;
            background: linear-gradient(to top, #22b838, #030d04);
            -webkit-background-clip: text;
            color: transparent;
        }


	</style>
</head>
<body>

<div id="container">


</div>

<script>

	let inner = '101011110101'  //代码雨内容
	let density = 20;         // 该数字决定了代码雨的密度，数字越大，密度越小
	let long = 10;             // 没隔断一帧，代码雨走的高度
	let spend = 30;           // 代码雨下落速度

    const container = document.querySelector('#container');

    getRandom = (m, n) => Math.floor(Math.random() * (n - m + 1) + m);

    function codeRain() {
        let top = -400;
        let p = document.createElement('p');
        p.innerHTML = inner;
        p.className = 'deep';
        p.style.left = getRandom(1, 100) + '%';
        p.style.top = top + 'px';
        let timer1 = setInterval(() => {
            top = top + long;
            p.style.top = top + 'px';
            if (top >= 1000) {
                clearInterval(timer1);
                container.firstElementChild.remove();
            }
        }, spend);
        return p;
    }

    setInterval(() => {
        let code = codeRain();
        container.appendChild(code);
    }, 20);


</script>


</body>
</html>